<!-- 个人信息 -->
<template>
	<view class="container">
	<view class="user-list u-flex u-row-between touxiang" style="position: relative;">
    <view class="list-content">
      <text class="list-name ">个人头像</text>
      <shImageUpload
          @uploadSuccess="uploadSuccess"
          :imgUrl="avatar"
      ></shImageUpload>
    </view>
		</view>
		<view class="user-list u-flex u-row-between">
      <view
      class="list-content"
      >
        <text class="list-name">昵称</text>
        <view class="u-flex">
          <input class="list-val" v-model="userData.name"  placeholder="请输入昵称~" maxlength="50"
                 placeholder-style="color:#c8c9cc;fontSize:32rpx" />
          <view class="arrow"></view>
        </view>
      </view>
		</view>
    <view class="user-list u-flex u-row-between">
      <view
          class="list-content"
      >
        <text class="list-name" >生日</text>
        <view class="u-flex">
<!--          <input class="list-val" v-model="userData.name" placeholder="请输入昵称~" maxlength="50"-->
<!--                 placeholder-style="color:#c8c9cc;fontSize:32rpx" />-->
          <view class="list-val" >
            <picker mode="date" :value="birthDay" @change="bindDateChange">
              <view class="uni-input">{{ birthDay ? birthDay.slice(0,10) : '请选择时间'}}</view>
            </picker>
          </view>
          <view class="arrow"></view>
        </view>
      </view>
    </view>
    <view class="user-list u-flex u-row-between">
      <view
          class="list-content"
      >
        <text class="list-name">性别</text>
        <view class="u-flex">
          <picker @change="bindPickerChange" :value="gender" :range="array">
            <view class="list-val">{{array[gender]}}</view>
          </picker>
          <view class="arrow"></view>
        </view>
      </view>
    </view>
    <view class="user-list u-flex u-row-between">
      <view
          class="list-content"
      >
        <text class="list-name">地区</text>
        <view class="u-flex">
<!--          <input class="list-val" v-model="userData.name"  maxlength="50"-->
<!--                 placeholder-style="color:#c8c9cc;fontSize:32rpx" />-->
          <view class="list-val" >
            {{address ? address : ''}}
          </view>
          <view class="arrow"></view>
        </view>
      </view>
    </view>
    <view style="margin-top: 50rpx" class="user-list u-flex u-row-between">
      <view
          class="list-content"
          @click="toAddress"
      >
        <text class="list-name">收货地址</text>
        <view class="u-flex">
          <input class="list-val" v-model="tip" disabled maxlength="50"
                 placeholder-style="color:#c8c9cc;fontSize:32rpx" />
          <view class="arrow"></view>
        </view>
      </view>
    </view>
		<!-- 		<view class="user-list  u-flex u-row-between u-m-b-10" @tap="showCalendar = true">
			<text class="list-name">生日</text>
			<view class="u-flex">
				<text class="list-val">{{ userData.birthDayday || '请选择生日~' }}</text>
				<text class="u-iconfont uicon-arrow-right u-m-l-20" style="color:#999;"></text>
			</view>
		</view> -->
<!--		<view class="user-list u-flex u-row-between" @tap="jump('/pages/user/clearuser')" v-if="false">-->
<!--			<text class="list-name">注销账号</text>-->
<!--		</view>-->
<!--		<view class="btn-box u-flex u-row-center u-col-center" v-if="false">-->
<!--			<button hover-class="hover-logout-btn" class="u-reset-button logout-btn"-->
<!--				@tap="showModal = true">退出登录</button>-->
<!--		</view>-->

		<button 
			class="u-reset-button save-btn" 
			:class="{ 'dis-btn': editInfoDisabled }"
			:disabled="editInfoDisabled" 
			@tap="editUserInfo"
		>
			保存
		</button>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import Auth from '@/ljshop/permission/index.js';
	import wechat from '@/ljshop/wechat/wechat';
  import shImageUpload from "@/pages/user/components/sh-image-upload.vue";
	export default {
		components: {
      shImageUpload
    },
		data() {
			return {
				platform: this.$platform.get(),
				userData: {},
				showCalendar: false,
				showModal: false,
				editInfoDisabled: false,
				thirdOauthInfo: null, //第三方信息
				avatar: '',
				changeAvater: false,
				changename: false,
				name: "",
        birthDay: '',
				userInfo: {},
				deleteuser: false,
				avatarList: [],
        tip:'新建/修改',
        array:['男','女'],
        gender:0,
        address: ''
			};
		},
		onLoad() {
			this.getInfo();
			if (platform == "android") {
				this.requestStag();
			}
      // 获取相册权限
     uni.getSetting({
        success: (res) => {
          if (!res.authSetting['scope.writePhotosAlbum']) {
            uni.authorize({
              scope: 'scope.writePhotosAlbum',
              success() {
                console.log('授权成功')
              },
              fail() {
                console.log('授权失败')
              }
            })
          }
        }
      })
		},
		methods: {
      bindPickerChange(e) {
        this.gender = e.detail.value
      },
      toAddress(){
        this.$Router.push({
          path:'/pages/user/address/list'
        })
      },
			removeImg(e){
				this.avatar = "";
			},
			requestStag() {
				plus.android.requestPermissions(['android.permission.CAMERA'], function(e) {
					if (e.deniedAlways.length > 0) { //权限被永久拒绝
						// 弹出提示框解释为何需要定位权限，引导用户打开设置页面开启
						return
					}
					if (e.deniedPresent.length > 0) { //权限被临时拒绝
						// 弹出提示框解释为何需要定位权限，可再次调用plus.android.requestPermissions申请权限
						console.log('Present Denied!!! ' + e.deniedPresent.toString());
						return
					}
					if (e.granted.length > 0) { //权限被允许
						//调用依赖获取定位权限的代码
						console.log('Granted!!! ' + e.granted.toString());
						return
					}
				}, function(e) {
					console.log('Request Permissions error:' + JSON.stringify(e));
					return
				});
			},
			// 上传图片成功-单图
			uploadSuccess(e) {
				this.avatar = e
				this.changeAvater = true
			},
			jump(path, query) {
				this.$Router.push({
					path: path,
					query: query
				});
			},
			navigateTodetail1() {
				let url = "https://www.hzwltb69.com/article/detail/14_0"
				uni.navigateTo({
					url: '/subunimodules/uni-id-pages/pages/common/webview/webview?url=' + url + '&title=注册协议',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			navigateTodetail2() {
				let url = "https://www.hzwltb69.com/article/detail/40_0"
				uni.navigateTo({
					url: '/subunimodules/uni-id-pages/pages/common/webview/webview?url=' + url + '&title=隐私协议',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},


			getInfo() {
				let that = this;
				if (uni.getStorageSync("UId")) {
					that.$http('user.apiinfo', {
						UId: uni.getStorageSync("UId"),
					}).then(resx => {
							if (resx.code == 1) {
								let res = resx.data.HzMember;
								that.userData = res;
								that.userInfo = res;
								that.avatar = res.avatar;
								that.name = res.name;
								res.gender ? that.gender = res.gender : '';
								that.birthDay = res.birth;
								res.address !== 'null' ? that.address = res.address : '';
							}
					});

				}
			},
      bindDateChange: function(e) {
        this.birthDay = e.detail.value
      },
      getDate(type) {
        const date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();

        if (type === 'start') {
          year = year - 60;
        } else if (type === 'end') {
          year = year + 2;
        }
        month = month > 9 ? month : '0' + month;
        day = day > 9 ? day : '0' + day;
        return `${year}-${month}-${day}`;
      },
			// 修改昵称
			onChangeusername() {

			},
			// 修改手机号
			bindMobile() {

			},
			// 退出登录
			confirmLogOut() {
				uni.removeStorageSync("UId");
				uni.removeStorageSync("token");
				uni.removeStorageSync("isLogin");
				this.$Router.back();
			},
			// 退出登录
			confirmdelete() {
				let that = this
				//console.info(uni.getStorageSync("userinfo").mobile )
				that.$http(
					'user.clearuser', {
						mobile: uni.getStorageSync("userinfo").mobile
					},
					'保存中...'
				).then(res => {

					uni.removeStorageSync("UId");
					uni.removeStorageSync("token");
					uni.removeStorageSync("isLogin");
					this.$Router.back();

				});

			},
			// 修改信息.
			editUserInfo() {
				let that = this;
				if (!that.userData.name) {
					this.$u.toast('昵称不能为空');
					return false;
				}
				if (!that.birthDay) {
					this.$u.toast('请填写生日');
					return false;
				}
				that.$http(
					'user.profile', {
						username: that.userData.name,
						avatar: that.avatar,
            address: this.address,
              gender: this.gender,
              birthDay: this.birthDay,
						UId: uni.getStorageSync("UId")
					},
					'保存中...'
				).then(res => {
					 

					that.editInfoDisabled = true;
					that.$u.toast('保存成功');
					this.$Router.back();

				});
			},


		}
	};
</script>

<style lang="scss" scoped>
	// 基本信息
	.info-head {
		.info-title {
			line-height: 60rpx;
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
		}

		

		.dis-btn {
			opacity: 0.5;
		}
	}

	// 三方
	.other-account {
		.head-title {
			line-height: 82rpx;
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
		}

		.list-img {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}

		.account-list {
			background-color: #fff;
			height: 100rpx;
			padding: 0 20rpx;

			.info {
				.avatar {
					width: 38rpx;
					height: 38rpx;
					border-radius: 50%;
					overflow: hidden;
				}

				.name {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}
			}

			.bind-box {
				.bind-btn {
					padding: 0 20rpx;
					line-height: 60rpx;
					background: #f5f6f8;
					border-radius: 20rpx;
					color: #999;
				}

				.relieve-btn {
					border-radius: 20rpx;
					padding: 0 20rpx;
					line-height: 60rpx;
					background: rgba(#ff0000, 0.05);
					color: #ff0000;
				}
			}
		}
	}

	// 个人信息项
	.user-list {
		margin: 0 auto;
		background: #fff;
		height: 100rpx;
    padding:0 50rpx 0 20rpx;
    .list-content{
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid #f1f1f1;
      position: relative;
      padding-top: 30rpx;
      .arrow{
        position: absolute;
        width: 30rpx;
        height: 30rpx;
        top: 37rpx;
        right: -35rpx;
        background: url("https://image.hzwltb69.com/app/date/2023/rightarr.png") no-repeat;
        background-size: 100%;
      }
    }
		.list-name {
      font-weight: 600;
			font-size: 32rpx;
		}

		.avatar {
			width: 67rpx;
			height: 67rpx;
			border-radius: 50%;
		}

		.list-val {
			color: #999;
			font-size: 28rpx;
			text-align: right;
		}
	}

	.btn-box {
		margin-top: 200rpx;

		.logout-btn {
			width: 710rpx;
			height: 80rpx;
			line-height: 80rpx;
			border: 1rpx solid #f54141;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #f54141;
		}

		.hover-logout-btn {
			width: 710rpx;
			height: 80rpx;
			background: #f54141;
			border: 1rpx solid #f54141;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #ffffff;
		}
	}
	
	
	.save-btn {
		color: #fff;
		background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
		width: 720rpx;
		border-radius: 20rpx;
		height:80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		position:fixed;
		left: 15rpx;
		bottom: 30rpx;
	}
	.touxiang{
		height: 100%;
		width: 100%;
	}
	.xuanzhetoux{
		// width: 80rpx;
		// height: 80rpx;
		// margin: 0 auto;
		// margin-right: 0;
	}
	.container{
		overflow: hidden;
	}
</style>